本文共 3307 字,大约阅读时间需要 11 分钟。
今天想说的,是怎样不看教程,直接山寨。实际上不可能每次山寨都有资料可寻,用到的知识点也不可能都是我们会的。怎么在这样的情况下山寨出成品,是对手艺、对眼力的考验。在我们能力不足的时候,善于观察的眼力往往可以解决很大的问题。今天看到咖啡猫发布了「兔子表情2.0」(),大概看了下,发现是通过加载某个js文件实现的。
(感谢咖啡猫辛勤的劳动。)
说实话,我对javascript并不熟悉,但它只有一个文件,我想实现难度并不高,不妨来山寨一番。 怎样山寨一个自己并不熟悉的东西?有人说了,去看书,学一遍再来。那你这智商真的让我们大家都深表遗憾。 我们需要的只是常识+眼力。 也许有人马上要喷了,这个简单你才能吹牛逼,复杂的东西你还行吗? 对此我想说,你非得时刻都让我们替你遗憾吗?复杂的东西,我肯定不行,既然复杂,难道我看看书,学一遍就行了?省省吧,有那精力,我不如找几个精通的人来搞。我虽然提倡自力更生,但也得有个效率和限度啊。 下面开始分析。 山寨一个东西,尤其是这种表情插件,几个关键地方改成我们自己的:logo、提示文字、标题、表情图片,那就针对这几个地方去找。首先从原版的使用方法开始。原版是通过点击发帖工具栏上的「管理UBB插件」按钮,进入插件管理窗口,在插件地址处输入插件的js文件地址(http://tim-tang.googlecode.com/files/demo.js)实现安装的,就像这样。
然后工具栏上会出现自定义插件的图标,鼠标移上去会有工具提示,点开后就可以输入表情,像这样。(图片摘自咖啡猫的帖子) 下一步怎么办?从什么地方切入呢? 观察 我们现在获得的信息有哪些?第一,js文件路径,第二插件图标,第三,插件界面。 那么从js文件入手,由于有了绝对路径,所以可以通过把路径粘贴到浏览器地址栏,来下载这个js文件,就像这样。 点击保存,我们用记事本打开这个js文件(或者dw或者vs随便)。 首先看到的就是这样的代码。很好,文件没有加密,这就让以下的山寨成为了可能。
var CsdnScriptPlugin999 = { ///这太简单了,根本不需要学js,直接修改成我们的内容。/// 接口版本 /// interfaceVersion: "1.0", ////// 插件标题,显示给用户看 /// caption: "由兔子党Tim(q107770540)提供的兔子表情插件V2.0", ////// 设计者在CSDN的ID /// designer: "q107770540", ////// 按钮对象,可选项 /// buttons: {}, ////// 分隔条对象,可选项 /// separators: {}, ////// 装载 /// load: function () { this.separators["icon"] = CsdnScriptWorkshop.addSeparator(); this.buttons["icon"] = CsdnScriptWorkshop.addButton( "由兔子党Tim(q107770540)提供的兔子表情插件V2.0", "http://tim-tang.googlecode.com/files/24.gif", function () { var htmlDialog = str_Html(); var point = absolutePoint(this); CsdnScriptWorkshop.showDialog("兔子表情", htmlDialog, point.x, point.y + 18, 400, 220); }); },
///注意这个地方:「"http://tim-tang.googlecode.com/files/24.gif",」,在我们山寨的时候要善于抓住关键点,这里我们应该敏锐的看到「24.gif」,说明这是一张图片,它的前面一句话「this.buttons["icon"]」,关键词icon,说明这个部分和图标相关。把图标地址粘贴到浏览器地址栏,查看,发现这张图标就是UBB工具栏上的插件图标。所以把它换成我们自己的图标。/// 插件标题,显示给用户看 /// caption: "由野比(conmajia)提供的旺旺表情插件V1.0", ////// 设计者在CSDN的ID /// designer: "conmajia",
///继续往下看,有这段代码/// 装载 /// load: function () { this.separators["icon"] = CsdnScriptWorkshop.addSeparator(); this.buttons["icon"] = CsdnScriptWorkshop.addButton( "由野比(conmajia)提供的旺旺表情插件V1.0", "http://images.cnblogs.com/cnblogs_com/conmajia/385085/r_1.gif", function () { var htmlDialog = str_Html(); var point = absolutePoint(this); CsdnScriptWorkshop.showDialog("野比的旺旺表情", htmlDialog, point.x, point.y + 18, 400, 220); }); },
var imgCount = 60;var userName = ""; function str_Html() { var str = "可以看到imgCount=60,从字面来看这个应该是image count(图片计数),也就是图片总数,那这个就应该是指表情插件一共有多少个图标。下面有个for循环,i从1到imgCount,循环体里面是一个组合而成的.gif图片地址。这就验证了我们的猜测。把地址换成我们自己图片的地址。"; for (var i = 1; i <= imgCount; i++) { str += " "; }
var imgCount = 5;var userName = ""; function str_Html() { var str = "保存js文件,找一个空间上传。(我传到了博客园,地址是http://files.cnblogs.com/conmajia/demo.js) 现在开始测试,点开管理器,装载我们自己的js插件。 于是乎,不出所料,我们的插件出来了。 点开看看,可以看到已经基本成功。 下面测试下: 完全成功。 通过简单的分析,做出自己的插件。相信今后会涌现出不少有趣的表情插件甚至其他功能插件。欢迎大家发挥创意。"; for (var i = 1; i <= imgCount; i++) { str += " "; }
鸣谢
咖啡猫(q107770540)
转载地址:http://yxdhb.baihongyu.com/